<!-- 这一页是homepage里成员介绍的详细页面，即点击成员介绍的卡片就跳转到此页 -->
<template>
  <div style="background-color: #f5f7fa">
    <header class="header">
      <div class="header-container">
        <h1 class="logo">ipss课题组-{{ name }}</h1>
        <div class="login-btn-container">
          <button id="loginBtn" class="login-btn" @click="goBack">
            返回上一页
          </button>
        </div>
      </div>
    </header>
    <div class="detail-page">
      <el-row>
        <el-col :span="16" :offset="4">
          <!-- 顶部头像与名字 -->
          <el-card class="header-card" shadow="hover">
            <div class="header-content">
              <el-avatar :size="120" :src="`${$baseURL}${member.avatar_url}`" />
              <div class="info">
                <h1 class="name">{{ member.full_name }}</h1>
                <p class="title">{{ member.degree }}</p>

                <p class="sub">{{ member.birth_date }}</p>
              </div>
            </div>
          </el-card>

          <!-- 基本信息 -->
          <el-card class="card-section" shadow="hover">
            <h2 class="section-title">基本信息</h2>
            <el-descriptions :column="2" border>
              <el-descriptions-item label="姓名">{{
                member.full_name
              }}</el-descriptions-item>
              <el-descriptions-item label="状态">
                <el-tag>
                  {{ member.acad_status }}
                </el-tag></el-descriptions-item
              >
              <el-descriptions-item label="联系方式">{{
                member.phone
              }}</el-descriptions-item>
              <el-descriptions-item label="家乡地址">{{
                member.address
              }}</el-descriptions-item>
              <el-descriptions-item label="导师">{{
                member.advisor
              }}</el-descriptions-item>
              <el-descriptions-item label="邮箱">
                {{ member.email }}
              </el-descriptions-item>
              <el-descriptions-item label="工作地点">{{
                member.workplace
              }}</el-descriptions-item>
              <el-descriptions-item label="工作岗位">
                <el-tag type="success">
                  {{ member.job_title }}
                </el-tag></el-descriptions-item
              >
              <el-descriptions-item label="工作单位">{{
                member.organization
              }}</el-descriptions-item>
              <el-descriptions-item label="工作类别">
                <el-tag type="danger" effect="plain">
                  {{ member.job_type }}
                </el-tag></el-descriptions-item
              >
              <el-descriptions-item label="个人标签">
                <el-tag
                  type="warning"
                  effect="plain"
                  v-for="(tag, index) in member.tag.split('-')"
                  :key="index"
                  style="margin-right: 6px"
                >
                  {{ tag }}
                </el-tag></el-descriptions-item
              >
            </el-descriptions>
          </el-card>

          <!-- 研究方向 -->
          <el-card class="card-section" shadow="hover">
            <h2 class="section-title">研究方向</h2>
            <p class="text-block">{{ member.research_direction }}</p>
          </el-card>

          <!-- 个人简介 -->
          <el-card class="card-section" shadow="hover">
            <h2 class="section-title">个人简介</h2>
            <p class="text-block">{{ member.introduction }}</p>
          </el-card>

          <!-- 成果展示 -->
          <el-card class="card-section" shadow="hover">
            <h2 class="section-title">个人成果</h2>
            <p class="text-block">{{ member.achievements }}</p>
            <!-- <ul class="list-block">
        <li v-for="(item, i) in member.achievements" :key="i">
          {{ item }}
        </li>
      </ul> -->
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from "vue-router";
import { ref, onMounted } from "vue";
import api from "@/utils/api";

// 使用 useRoute 获取路由参数
const route = useRoute();
const name = route.params.name; // 获取路由参数 name

const router = useRouter();

// 返回上一页
const goBack = () => {
  router.push({
    name: "HomePage",
    query: { tab_active: "members" },
  }); // 返回上一页
};

// 模拟数据，实际请通过 API 请求获取
// const member = ref({
//   name: "李四",
//   title: "硕士研究生",
//   gender: "女",
//   age: 24,
//   supervisor: "张教授",
//   email: "lisi@example.com",
//   avatar: "https://picsum.photos/200?random=6",
//   research: "智能制造系统、人机交互、数据挖掘",
//   intro:
//     "李四，硕士研究生，研究方向为智能制造与人机交互，参与多项科研项目，并在相关领域期刊上发表论文。",
//   achievements: [
//     "2023年，在《计算机集成制造系统》发表论文一篇",
//     "2022年，获得北京市优秀硕士论文奖",
//     "参与国家重点研发计划项目子课题研究",
//   ],
// });
const member = ref({
  full_name: "",
  birth_date: "",
  address: "",
  phone: "",
  email: "",
  advisor: "",
  degree: "",
  graduation_date: "",
  workplace: "",
  organization: "",
  job_title: "",
  research_direction: "",
  introduction: "",
  achievements: "",
  avatar_url: "",
  job_type: "",
  tag: "",
  acad_status: "",
});

// 获取成员详细信息
const fetchMemberDetail = async () => {
  try {
    const res = await api.post("/profile/search", {
      full_name: name,
    });
    console.log("返回数据:", res.data);
    if (res.data.code === 200) {
      member.value = res.data.data;
    }
  } catch (err) {
    console.error("获取详情失败:", err.response?.data || err.message);
    alert("该通知不存在");
    router.push({ name: "NoticeList" }); // 返回通知列表
  }
};

onMounted(() => {
  fetchMemberDetail();
});
</script>

<style scoped>
.detail-page {
  margin-top: 50px;
  padding: 20px;
  background: #f5f7fa;
}
.header-card {
  margin-bottom: 20px;
  border-radius: 12px;
}
.header-content {
  display: flex;
  align-items: center;
  gap: 20px;
}
.info .name {
  font-size: 26px;
  font-weight: bold;
  margin: 0;
}
.info .title {
  color: #409eff;
  font-size: 16px;
  margin: 4px 0;
}
.info .sub {
  color: #666;
}
.card-section {
  margin-bottom: 20px;
  border-radius: 12px;
}
.section-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #409eff;
}
.text-block {
  line-height: 1.8;
  color: #333;
  white-space: pre-line;
}
.list-block {
  margin: 0;
  padding-left: 20px;
  line-height: 1.8;
  color: #333;
}

/* Header */
.header {
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 16px 32px;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  color: #1e40af;
}

.login-btn-container {
  display: flex;
  align-items: center;
}

.login-btn {
  background-color: #2563eb;
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  transition: background-color 0.3s ease;
}

.login-btn:hover {
  background-color: #1d4ed8;
}
</style>
